import { View, Image, Text } from '@tarojs/components'
import { getStorageSync } from '@tarojs/taro'
import { AtAvatar, AtTabBar, AtButton } from 'taro-ui'
import NavBar from '../../components/topbar/topbar'
//import Date from '../../components/date/date'
import { useEffect, useState } from 'react'
//import moment from "moment";
//import shouye from './image/shouye.png';
import music from './image/music.png';
import musicStop from './image/musicStop.png';
import Taro from '@tarojs/taro'
import './firstPage.scss'
let innerAudioContext = Taro.createInnerAudioContext();

function fristPage() {

  const [current] = useState(5)
  const [isOpen, setOpen] = useState(false)
  const [recommendedList, setRecommendedList] = useState([{ "recommended_title": null, "recommended_content": null }])
  // const selectInfo = () => {
  useEffect(() => {
    Taro.cloud.callFunction({
      // 云函数名称(对每日推荐进行数据提取，后续会分板块进行数据的提取)
      name: 'collection',
      data: {
        // $url:"find_recommended",
        event: "recommended"
      }
    }).then(res => {
      setRecommendedList(res.result);
    })
  }, [])
  console.log(recommendedList)
  //产生随机整数  用于recommendedList中随机获取推荐信息
  const len = Math.round(Math.random() * (recommendedList.length - 1))
  // }
  // 今日画报点击
  const handleClick = lists => {
    //点击传值
    // const data = lists
    // 数据加密
    let value = JSON.stringify(lists)
    Taro.navigateTo({
      url: '/pages/todayPush/todayPush?value=' + encodeURIComponent(value)
    })
  }
  //tabbar导航栏得跳转
  const handleClick1 = (value) => {
    if (value === 0) {
      Taro.navigateTo({
        url: '/pages/firstPage/firstPage'
      })
    } else if (value === 1) {
      //营养师页面得跳转
      Taro.navigateTo({
        url: '/pages/dietitian/dietitian'
      })
    } else if (value === 2) {
      Taro.navigateTo({
        url: '/pages/postBar/postBar'
      })
    } else if (value === 3) {
      Taro.navigateTo({
        url: '/pages/calendar/calendar'
      })
    }
  }
  const handleClick2 = () => {
    Taro.navigateTo({
      url: '/pages/my/index'
    })
  }
  const changeOpen = () => {
    setOpen(!isOpen)
  }
  innerAudioContext.autoplay = true;
  innerAudioContext.volume = 0.1;
  innerAudioContext.src =
    "https://6763-gcxyup-9gzg5uqx2884e5f1-1310436931.tcb.qcloud.la/%E4%BC%98%E7%BE%8E%E4%B9%8B%E9%9F%B3-%E6%B8%A9%E6%9A%96%E4%BA%BA%E5%BF%83%E5%87%80%E5%8C%96%E5%BF%83%E7%81%B5%E7%9A%84%E4%BC%98%E7%BE%8E%E4%B9%8B%E9%9F%B3-%E6%9A%96%E9%98%B3_%E7%88%B1%E7%BB%99%E7%BD%91_aigei_com.mp3?sign=2abffcef30c6c9cbf60c9aefc0aa382e&t=1649424665";
  const mStop = () => {
    innerAudioContext.stop();
    // innerAudioContext.onStop(()=>{
    //   console.log('停止语音')
    // })
  };
  const mstart = () => {
    innerAudioContext.play()
  };

  // 未登录时  可以点击图片进行登录
  const handleLogin = () => {
    Taro.navigateTo({
      url: '/pages/my/register/login'
    })
  }

  // 获取缓存中的用户登录信息
  const user = getStorageSync('userInfo')
  const handleChange = () => {
    let img = user.avatarUrl
    let username = user.nickName
    if (img === undefined && username === undefined) {
      img = ''
      return (
        <>
          <NavBar title="happy baby" renderLeft={
            <View onClick={handleLogin}>
              <AtAvatar className="user" size="small" circle image={img} />
            </View>
          } />
          <View className="hello">你好</View>
          <View className="name" >未登录</View>
        </>
      )
    } else {
      return (
        <>
          <NavBar title="happy baby" renderLeft={
            <View onClick={handleClick2}>
              <AtAvatar className="user" size="small" circle image={img} />
            </View>
          } />
          {/* <View onClick={handleClick2}>
            <AtAvatar className="user" size="small" circle image={img}></AtAvatar>
          </View> */}
          <View className="hello">你好</View>
          <View className="name">{username}</View>
        </>
      )
    }
  }
  let myDate = new Date()
  let year = myDate.getFullYear();
  let month = myDate.getMonth() + 1;
  let date = myDate.getDate();
  let time = year + "年" + month + "月" + date + "日";
  console.log(time);
  //let myset = setInterval(,1000)
  return (
    <View >
      <View className="pic" style={'background-image: url(' + recommendedList[len].picture + ');'}></View>
      {/* <image className="pic" src={shouye} ></image> */}
      {/* <Image className="pic" src={shouye} /> */}
      {/* 用于登录界面的展示 */}
      {handleChange()}
      {/* <AtAvatar className="user" size="small" circle image='https://6763-gcxyup-9gzg5uqx2884e5f1-1310436931.tcb.qcloud.la/user.jpg?sign=196bd29d1ac72c3941bdf3d4accfc5a6&t=1648629450'></AtAvatar> */}
      {/* <View className="title">奶爸签到</View> */}
      <View className="date">
        <View className="audio" onClick={() => { changeOpen() }}>
          {isOpen ? (<Image className='audioPic' src={musicStop} onClick={mstart} />) : (<Image className='audioPic' src={music} onClick={mStop} />)}
        </View>
        {/* 时间组件的调用，中文日期的展示
        <Date />*/}
        {/* <Text className='dataText'>
          {
          //  baodate2chinese(moment().format('YYYY-MM-DD'))
          }
        </Text> */}
        <Text className='dataText'>
          {time = year + "年" + month + "月" + date + "日"}
        </Text>
      </View>
      {/* <View className="hello">你好</View> */}
      {/* <View className="name" >XXX</View> */}
      <View></View>

      <AtButton className="open" onClick={() => handleClick(recommendedList[len])} circle size='normal'>打开今日画报</AtButton>
      <AtTabBar
        className='TabBar'
        backgroundColor='transparent'
        fixed
        tabList={[
          { title: '首页', image: require('./image/TaBar1.png') },
          { title: '营养师', image: require('./image/TaBar2.png') },
          { title: '贴吧', image: require('./image/TaBar3.png') },
          { title: '孕期记录', image: require('./image/TaBar4.png') },
        ]}
        onClick={handleClick1}
        current={current}
      />
    </View>
  )
}

export default fristPage
